<template>
    <div class="app-container">
      <el-row>
        <el-col :span="24" class="top">
          <Search @handleSearch="handleSearch" :formData="formData" :formOptions="formOptions"></Search>
          <Operate @operateAction="operateAction" @refreshItemList="getItemList" :formData="formData" :multipleSelection="multipleSelection"></Operate>
          <Table :itemList="itemList" :formData="formData" :dictOptions="dictOptions" @handleSelectionChange="handleSelectionChange">
            <template v-slot:operateRow = "value">
              <el-button v-for="(item, index) in formData.operateList" :key="index" v-if="item.place=='row'" @click="operateAction(item, itemList[value.slotRow])" :type="item.buttonType" :plain="item.buttonType=='text'?false:true" size="small">{{item.name}}</el-button>
            </template>
          </Table>
          <pagination
            style="background: #ffffff; height: 50px"
            v-show="totalSize > 0"
            :total="totalSize"
            :page.sync="page"
            :limit.sync="size"
            @pagination="getItemList"
          />
        </el-col>
      </el-row>
      <searchHandleView ref="searchHandle" @confirm='getItemList'></searchHandleView>
      <fieldHandleView ref="fieldHandle" :form="fieldForm" @confirm='getItemList'></fieldHandleView>
      <operateHandleView ref="operateHandle" @confirm='getItemList'></operateHandleView>
      <updateRoleView ref="updateRole" @confirm='getItemList'></updateRoleView>
      <errorDialog ref="errorDialog" :errorList="errorList"></errorDialog>

      <operateDialog ref="operateDialog" @refreshItemList="getItemList"></operateDialog>
    </div>
  </template>
  
  <script>
  import { getFieldListOptionByFormId, getFieldFormOptionByFormId } from '@/api/interface/form.js'
  import { getItemList, getFormData, operateActionPost } from '@/api/interface/operate.js'
  import searchHandleView from '@/views/interface/form/components/searchHandleView'
  import fieldHandleView from '@/views/interface/form/components/fieldHandleView'
  import operateHandleView from '@/views/interface/form/components/operateHandleView'
  import updateRoleView from "@/views/system/role/components/updateRoleView.vue"
  import { Loading } from 'element-ui'
  import errorDialog from '@/views/interface/form/errorDialog'
  import operateDialog from '@/views/interface/form/components/operateDialog'
  export default {
    components: { searchHandleView, fieldHandleView, operateHandleView, updateRoleView, errorDialog, operateDialog },
    data() {
      return {
        page: 1,
        size: 20,
        totalSize: 0,
        itemList: [],
        formId: '',
        formData: {},
        searchParams: {},
        fieldForm: {},
        multipleSelection: [],
        formOptions: {},
        dictOptions: {},
        fullscreenLoading: null,
        errorList: []
      }
    },
    created(){
      this.formId = this.$route.meta.formModel.id
      this.getItemList()
      this.getFormData()
      this.getFieldFormOptionByFormId()
      this.getFieldListOptionByFormId()
    },
    methods:{
      handleSearch(searchParams){
        this.searchParams = searchParams
        this.page = 1
        this.getItemList()
      },
      handleSelectionChange(val){
        this.multipleSelection = val
      },
      operateAction(operate, val){
        console.log('自定义操作', operate, val)
        if(operate.actionType == 'api'){
          operateActionPost(operate.formModel.url + operate.key + 'Action/', {'obj_ids': val}).then((res) => {
            if(res.data.code == 10000){
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getItemList()
            }else if(res.data.code == 10001){
              this.errorList = res.data.data
              this.$refs.errorDialog.show()
            }
          })
          return
        }
        switch (operate.key) {
          case 'update':
            this.$router.push({name: 'Update', query: {formData: encodeURIComponent(JSON.stringify(this.formData)), rowId: val.id}})
            break;
          case 'setRouterByRole':
            this.$refs.updateRole.show(val)
            break;
          case 'searchHandle':
            this.$refs.searchHandle.show(val)
            break;
          case 'fieldHandle':
            this.fieldForm = val
            this.$refs.fieldHandle.show()
            break;
          case 'operateHandle':
            this.$refs.operateHandle.show(val)
            break;
          default:
              break;
        }
      },
      // 获取表单配置数据
      getFormData(){
        getFormData({formId: this.formId}).then(res=>{
          if (res.data.code == 10000) {
            this.formData = res.data.data
          }
        })
      },
      // 获取列表数据
      getItemList() {
        this.searchParams.page = this.page
        this.searchParams.size = this.size
        getItemList(this.$route.meta.formModel.url, this.searchParams).then(res => {
          if (res.data.code == 10000) {
            this.totalSize = res.data.data.total_count
            this.itemList = res.data.data.list
          }
        });
      },
      // 获取字典
      getFieldFormOptionByFormId(){
        getFieldFormOptionByFormId({
          formId: this.formId
        }).then(res=>{
          if(res.data.code == 10000){
            this.formOptions = res.data.data
          }
        })
      },
      // 获取字典
      getFieldListOptionByFormId(){
        getFieldListOptionByFormId({
          formId: this.formId
        }).then(res=>{
          if(res.data.code == 10000){
            this.dictOptions = res.data.data
          }
        })
      },
    },
  }
  </script>
  
  
  <style lang="scss" scoped>
  
  </style>
  